<template>
  <page-frame>
    <div class="member-centre">

      <ul class="centre-top">
        <el-row :gutter="2">
          <!--<el-col :span="3" style="text-align: left; padding-top: 20px;border: none">-->
            <!--<li class="btn" style="border: none;width: 100%;">-->
              <!--<h3 style="font-size: 20px;margin-top: 0px;"> 业务办理</h3>-->
              <!--<div><router-link :to="{name:'memberFile'}"><el-button size="large" style="height: 70px;width: 100%;" type="primary">会员档案</el-button></router-link></div>-->
              <!--<div><router-link :to="{name:'memberCheckIn'}"><el-button size="large" type="primary">会员入住</el-button></router-link></div>-->
              <!--<div><router-link :to="{name:'membersRetired'}"><el-button size="large" type="primary">会员退住</el-button></router-link></div>-->
              <!--<div><router-link :to="{name:'bedChanges'}"><el-button size="large" type="primary">会员换床</el-button></router-link></div>-->
              <!--<div><router-link :to="{name:'packageChanges'}"><el-button size="large" type="primary">套餐变更</el-button></router-link></div>-->
            <!--</li>-->
          <!--</el-col>-->
          <el-col :span="14">
            <li class="chartCell line-chart" style="margin-top: 20px;position: relative">
              <echart :chartOption = "changeLineOption1" :index="'first'"></echart>
              <div style="position: absolute; top:5px; right: 56px;color: white">
                <div><el-button size="small" type="text" @click="getBusiness(0)">当月</el-button></div>
                <div> <el-button size="small" type="text" @click="getBusiness(1)">最近6个月</el-button></div>
                <div><el-button size="small" type="text" @click="getBusiness(2)">最近12个月</el-button></div>
              </div>

            </li></el-col>
          <el-col :span="10"><li class="chartCell pie-chart" style="margin-top: 20px"><echart :chartOption = "gradePieOption2" :index="'second'"></echart></li></el-col>
        </el-row>
        <li></li>
      </ul>

      <div class="handle">
        <el-row :gutter="40">
          <el-col :span="6">
            <div class="handleCell blue active" @click="handleState(1)">
              <div class="cellIcon"><img src="../../img/center1.png" alt=""></div>
              <div class="cellWords">
                <div class="shu">{{memberApplyCount.haveIn}}</div>
                <div class="wen">进行中</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="handleCell green" @click="handleState(0)">
              <div class="cellIcon"><img src="../../img/center2.png" alt=""></div>
              <div class="cellWords">
                <div class="shu">{{memberApplyCount.pendingAudit}}</div>
                <div class="wen">待审核</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="handleCell orange" @click="handleState(3)">
              <div class="cellIcon"><img src="../../img/center3.png" alt=""></div>
              <div class="cellWords">
                <div class="shu">{{memberApplyCount.pendingMoney}}</div>
                <div class="wen">待结算</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="handleCell red" @click="handleState(2)">
              <div class="cellIcon"><img src="../../img/center4.png" alt=""></div>
              <div class="cellWords">
                <div class="shu">{{memberApplyCount.inFinsh}}</div>
                <div class="wen">已完成</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="centre-bottom">
        <el-card class="box-card">
          <el-row class="text item"  v-for="data in approvalTableData">
            <el-col :span="5" class="text-main"><span>{{data.memberName}}/{{data.sex}}/{{data.age}}</span></el-col>
            <el-col :span="10" class="text-main"><span>{{data.moveType}}  |  <span style="color:indianred">{{data.taskKey}}</span></span></el-col>
            <el-col :span="7" class="text-main"><span>最近更新：{{data.updateTime}}</span></el-col>
            <el-col :span="1" class="text-main" v-show="true"><el-button size="small"  type="info" @click="goOn(data)">继续</el-button></el-col>
            <el-col :span="1" class="text-main" v-show="true"><el-button size="small"  type="info" @click="stopBtn(data)">中止</el-button></el-col>
          </el-row>
        </el-card>
      </div>
      <!--</el-dialog>-->
      <div class="pagination">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangePage"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>

      <!--中止原因-->
      <el-dialog title="中止进程" :visible.sync="stopRefusal" size="tiny" :close-on-click-modal="false">
        <el-form>
          <el-form-item label="中止原因">
            <el-col :span="20">
              <el-input
                type="textarea"
                v-model="refuseReason"
                style="width:100%!important"
              >
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="stopRefusal = false">取 消</el-button>
          <el-button type="primary" @click="stop">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </page-frame>
</template>
<script>

  import echart from '../../components/chart/echart'
  import commonApi from '../../service/member/commonApi';
  import memCenterApi from '../../service/member/memCenterApi'

  export default {
    data() {
      return {
        activeName: 'first',
        refuseReason:"",
        currentMemberObj:{},
        stopRefusal:false,
        currentStatus:1,
        memberApplyCount:{
          haveIn: "",
          inFinsh: "" ,
          pendingAudit: "",
          pendingMoney: "",
        },
        approvalTableData:[],
//        approvalTableData:[{
//          "actId": 0,
//          "age": 0,
//          "dateApplication": "string",
//          "gender": 0,
//          "moveType":null,
//          "memberApplyCount": {
//            "haveIn": 0,
//            "inFinsh": 0,
//            "pendingAudit": 0,
//            "pendingMoney": 0
//          },
//          "memberId": 0,
//          "memberName": "string",
//          "memberNo": "string",
//          "remark": "string",
//          "remarkArr": [
//            "string"
//          ],
//          "runId": "string",
//          "taskIdArr": [
//            "string"
//          ],
//          "taskKeyArr": [
//            "string"
//          ],
//          "taskNameArr": [
//            "string"
//          ],
//          "updateTime": "2017-09-28T02:54:08.961Z"
//        }],
        queryData:{

        },
        currentPage:1,
        total:0,
        changeLineOption1:{
          title : {

          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '10%',
            containLabel: true
          },
          tooltip : {
            trigger: 'axis',
          },
          legend: {
            data:[],
          },
//          color: ["#f6b4a2", "#faa753", "#f68d58", "#add061", "#f6b4a2", "#f68d58"],
          color: ["#f6b91c", "#fa7a53", "#7089ce", "#3cbbb0", "#3cbbb0", "#f68d58"],
          calculable : true,
          xAxis :
            {
              type : 'category',
              boundaryGap : false,
              data : [],
            }
          ,
          yAxis :
            {
              type : 'value',
              axisLabel : {
                formatter: '{value} 人',
              },
            }
          ,
          series : []
        },
        gradePieOption2:{
          title : {
            x:'center',
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          color: ["#5fa1b7", "#7089ce", "#faa753", "#f68d58", "#add061", "#f6b4a2", "#f68d58"],
          series : [
            {
              name: '访问来源',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[],
            }
          ]
        },
      }
    },
    methods: {
      init(){
        this.getBusiness(0);  // 办理业务折线图
        this.getCareGrade(); //照护等级饼图
        this.handleState(1); //查询进行中业务
      },
      /**
       * 办理业务折线图
       */
      getBusiness(type){
        let self = this;
        memCenterApi.getMemberLineChart(type).then(res => {
          if( res.status == "200"){
            self.changeLineOption1 = res.body.data;
          };
        },res => {});
      },
      /**
       * 照护等级饼图
       */
      getCareGrade(){
        memCenterApi.getMemberPieChart().then(res => {
          if( res.status == "200"){
            this.gradePieOption2 = res.body.data;
          };
        },res => {});
      },
      /**
       * 继续
       */
      goOn(memberObj){
        switch (memberObj.taskKeyArr[0]){
          case "inApply_inApplyingFor":
            this.$router.push({name:"checkInProcess02",params:{memberObj:memberObj}});
            break;
          case "inApply_examination":
            this.$router.push({name:"checkInProcess02",params:{memberObj:memberObj}});
            break;
          case "inApply_InAssessment":
            this.$router.push({name:"checkInProcess02",params:{memberObj:memberObj}});
            break;
          case "inApply_servicePlan":
            this.$router.push({name:"checkInProcess02",params:{memberObj:memberObj}});
            break;
          case "inApply_bedAppointment":
            this.$router.push({name:"checkInProcess02",params:{memberObj:memberObj}});
            break;
          case "inApply_audit":
            this.$router.push({name:"checkInProcess03",params:{memberObj:memberObj}});
            break;
          case "inApply_affirm":
            this.$router.push({name:"checkInProcess04",params:{memberObj:memberObj}});
            break;

          case "outApply_audit":
            this.$router.push({name: "retreatProcess02", params: {memberObj: memberObj}});
            break;
          case "outApply_affirm":
            this.$router.push({name: "retreatProcess03", params: {memberObj: memberObj}});
            break;

          case "bedChange_audit":
            this.$router.push({name:"changeBed02",params:{memberObj:memberObj}});
            break;
          case "bedChange_affirm":
            this.$router.push({name:"changeBed03",params:{memberObj:memberObj}});
            break;

          case "comboChange_audit":
            this.$router.push({name:"packageChange02",params:{memberObj:memberObj}});
            break;
          case "comboChange_affirm":
            this.$router.push({name:"packageChange03",params:{memberObj:memberObj}});
            break;
        };
      },
      /**
       * 中止按钮
       */
      stopBtn(memberObj){
        this.currentMemberObj = {};
        this.currentMemberObj = memberObj;
        this.stopRefusal = true;
      },
      /**
       * 确认中止
       */
      stop(){
        commonApi.abortProcess(this.currentMemberObj.actId,this.refuseReason).then(response => {
          if(response.data.status==200){
            this.$message({
              type: 'success',
              message: '终止成功!'
            });
            this.stopRefusal = false;
            this.handleState(this.currentStatus);
          }else{
            this.$message({
              type: 'success',
              message: '终止失败!'
            })
          }
        })
      },
      /**
       * 查询业务状态
       */
      handleState(status){
        //0待审核，1进行中，2，已完成，3，待结算
        let self = this;
        self.currentStatus = status;
        memCenterApi.approvalStatus(10,self.currentPage,status).then(res =>{
          self.approvalTableData = res.body.data.list;
          self.memberApplyCount =res.body.data.list[0].memberApplyCount;
          self.total = res.body.data.total;
          for(let row of self.approvalTableData){
            row.taskKey = '';
            row.sex = "";
            if (row.taskNameArr.length > 0) {
              row.taskNameArr.forEach(function (key) {
                row.taskKey += key+"/";
              });
            }
            if(row.taskKey){
              row.taskKey = row.taskKey.substring(0,row.taskKey.length-1);
            };
            if(row.gender == "0"){
              row.sex == "男"
            }else{
              row.sex == "女"
            };
          };
        },res =>{})
      },
      /**
       * 分页相关函数
       */
      handleSizeChange(val) {
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        this.handleState(this.currentStatus);
      },

    },
    components: {
      echart
    },
//    mounted: function () {
//      this.init();
//    },
    beforeMount:function () {
      this.init();
    },


  }
</script>

<style>
  .member-centre{

  }
  .member-centre .item.text {
    /*background-color: #F9FAFC;*/
    border-bottom:1px solid #ccc;
    font-size: 14px;
    padding: 10px 15px;
  }
  .member-centre .item.text .text-main{
    margin-top: 5px;
  }
  .member-centre .item.text:hover {
    background-color: #E5E9F2;
  }
  .member-centre .item span.btns{
    float: right;
  }

  .member-centre .clearfix:before,
  .member-centre .clearfix:after {
    display: table;
    content: "";
  }
  .member-centre .clearfix:after {
    clear: both
  }
  .member-centre .el-card__header{
    padding: 3px 20px;
  }
  .member-centre ul.centre-top{
    width: 100%;
    font-size: 0;
  }
  .member-centre ul.centre-top li{
    display: inline-block;
    font-size: 14px;
  }
  .member-centre ul.centre-top li.btn div{
    margin-top: 36px;
  }
  .member-centre ul.centre-top li.btn div:first-of-type{
    margin-top: 20px;
  }
  .member-centre .centre-top .chartCell{
    width: 100%!important;
  }
  .member-centre .centre-top .btn{
    padding:0px;
  }
  .member-centre  .centre-bottom{
    margin-top: 10px;
  }

  .member-centre .handle .handleCell{
    width: 100%;
    height: 112px;
    border-radius: 4px;
    border:1px solid #ccc;
    overflow: hidden;
    padding: 20px 50px 20px 20px;
  }
  .member-centre .handle .handleCell.blue:hover{
    box-shadow: 0px 0px 6px #337ab7;
  }
  .member-centre .handle .handleCell.green:hover{
    box-shadow: 0px 0px 6px #5cb85c;
  }
  .member-centre .handle .handleCell.orange:hover{
    box-shadow: 0px 0px 6px #f0ad4e;
  }
  .member-centre .handle .handleCell.red:hover{
    box-shadow: 0px 0px 6px #d9534f;
  }
  .member-centre .handle .handleCell.blue{
    border-color:#337ab7;
    background-color:#337ab7;
  }
  .member-centre .handle .handleCell.green{
    border-color:#5cb85c;
    background-color:#5cb85c;
  }
  .member-centre .handle .handleCell.orange{
    border-color:#f0ad4e;
    background-color:#f0ad4e;
  }
  .member-centre .handle .handleCell.red{
    border-color:#d9534f;
    background-color:#d9534f;
  }

  .member-centre .handle .handleCell .cellIcon{
    float: left;
    width: 70px;
    height: 70px;
  }
  .member-centre .handle .handleCell .cellWords{
    float: right;
    color: #ffffff;
    margin-top: 5px;
  }
  .member-centre .handle .handleCell .cellWords .shu{
    font-size: 38px;
    line-height: 38px;
  }
  .member-centre .handle .handleCell .cellWords .wen{
    font-size: 16px;
    line-height: 25px;
    text-align: right;
  }
  .member-centre .centre-top .chartCell.line-chart{
    background-color:  #f8f8f8;
  }
  .member-centre .centre-top .chartCell.pie-chart{
    background-color: #f8f8f8;
  }

</style>
